<template>
  <BottomDrawer
    :visible="addVisible" class="gearForm"
    :title="dataType.dataType === 0 ? '会员卡' : '会员卡'"
    :width="560"
    @close="addVisible = false"
  >
    <div>
      <el-row>
        <el-col :span="20" :offset="1">
          <PageForm
            ref="pageForm"
            v-if="addVisible"
            :list="list"
            :labelPosition="'left'"
            :form-data="formData"
            :rules="rules"
          >
          </PageForm>
        </el-col>
      </el-row>
    </div>

    <template #footer>
      <el-button @click="handleSubmit" :loading="loadingBtn" type="primary"
        >确定</el-button
      >
      <el-button @click="addVisible = false">取消</el-button>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { RoleForm, RoleQuery } from '@/types/role';
import type { FormRules, ElTree } from 'element-plus';
// import { addShift ,updateShift} from '@/api/register/index';
import { feeGetSelectList } from '@/api/account';
import {
  getGearList,
  addGear,
  updateGear,
  deleteGear,
  enableGear,
  disableGear,
} from '@/api/gear/index';
import type {
  GearInfo,
  GearResponse,
  GearTable,
  GearPagination,
} from '@/types/gear';
const loadingBtn = ref<boolean>(false);

const rules = reactive<FormRules<GearInfo>>({
  gearName: [{ required: true, message: '请输入套餐名称', trigger: 'blur' }],
  presentPrice: [
    { required: true, message: '请输入销售金额', trigger: 'blur' },
  ],
  rechargeAmount: [
    { required: true, message: '请输入充值金额', trigger: 'blur' },
  ],
  sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }],
});

const formData = ref<GearInfo>({
  gearName: '',
  presentPrice: '',
  rechargeAmount: '',
  sortNum: '',
});

// 获取序列列表
const pageForm = ref();
const dataType = defineProps<{ dataType: Number }>();

defineExpose<{
  open: () => void;
  open1: (menu: GearInfo) => void;
}>({
  open: () => {
    formData.value = {
      gearName: '',
      presentPrice: '',
      rechargeAmount: '',
    };
    addVisible.value = true;
  },
  open1: (menu: GearInfo) => {
    formData.value = {
      gearName: menu.gearName,
      presentPrice: menu.presentPrice ,
      rechargeAmount: menu.rechargeAmount ,
      sortNum: menu.sortNum,
      gearId: menu.gearId,
    };
    addVisible.value = true;
  },
});

const addVisible = ref(false);

const list: any = computed(() => [
  {
    list: [
      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'gearName',
        componentProps: {
          width: '400px',
          placeholder: '套餐名称',
        },
        label: '套餐名称',
      },
      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'rechargeAmount',
        componentProps: {
          width: '350px',
          rightText: '元',
          placeholder: '充值金额',
        },
        label: '充值金额',
      },
      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'presentPrice',
        componentProps: {
          width: '350px',
          rightText: '元',
          placeholder: '销售金额',
        },
        label: '销售金额',
      },
      {
        span: 24,
        component: 'input',
        labelWidth: '100px',
        prop: 'sortNum',
        componentProps: {
          width: '400px',
          placeholder: '排序号',
        },
        label: '排序号',
      },
    ],
  },
]);

const addChannelApi = async () => {
  loadingBtn.value = true;
  let data = {...formData.value}
  data.presentPrice = Number((formData.value.presentPrice * 100).toFixed(2))
  data.rechargeAmount = Number((formData.value.rechargeAmount * 100).toFixed(2))
  let res = await addGear(data);
  //console.log(res);

  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
    closeDrawer();
  } else {
    
  }
  loadingBtn.value = false;
};
const editChannelApi = async () => {
  loadingBtn.value = true;
  let data = {...formData.value}
  data.presentPrice = Number((formData.value.presentPrice * 100).toFixed(2))
  data.rechargeAmount = Number((formData.value.rechargeAmount * 100).toFixed(2))
  let res = await updateGear(data);
  //console.log(res);
  if (res.code == '200') {
    ElMessage({
      type: 'success',
      message: '操作成功',
    });
    closeDrawer();
  } else {
  
  }
  loadingBtn.value = false;
};
const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {
      if (dataType.dataType === 0) {
        addChannelApi();
      } else {
        editChannelApi();
      }
    } else {
      //console.log('error submit!', fields);
    }
  });
};
const emit = defineEmits(['closeDrawer']);
const closeDrawer = () => {
  addVisible.value = false;
  emit('closeDrawer');
};
</script>
<style lang="scss" >
  .gearForm .modal-footer{
    padding: 10px 0px;
  }
</style>

<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
</style>
